<template>
  <div class="geo3d" id="map"></div>
</template>
<script>
import $ from "jquery";
import mapJson from "@/assets/json/map.json";
import { mapMutations } from "vuex";
var myChart;
var area;
export default {
  name: "geogeo3d",
  data() {
    const _self = this;
    return {
      areaName: "广西自治区",
      geoCoordMap: {
        南宁市: [108.520004, 23.02402],
        柳州市: [109.411703, 24.814617],
        桂林市: [110.399121, 25.274215],
        梧州市: [110.977604, 23.474803],
        北海市: [109.419254, 21.673343],
        防城港市: [107.945478, 21.814631],
        钦州市: [109.024175, 22.167127],
        贵港市: [110.002146, 23.2936],
        玉林市: [110.254393, 22.38136],
        百色市: [106.616285, 23.897742],
        贺州市: [111.452056, 24.414141],
        河池市: [107.862105, 24.695899],
        来宾市: [109.229772, 23.733766],
        崇左市: [107.353926, 22.404108],
      },
      geoMap: {
        南宁市: { order: 0, depCode: 450100 },
        柳州市: { order: 1, depCode: 450200 },
        桂林市: { order: 2, depCode: 450300 },
        梧州市: { order: 3, depCode: 450400 },
        北海市: { order: 4, depCode: 450500 },
        防城港市: { order: 5, depCode: 450600 },
        钦州市: { order: 6, depCode: 450700 },
        贵港市: { order: 7, depCode: 450800 },
        玉林市: { order: 8, depCode: 450900 },
        百色市: { order: 9, depCode: 451100 },
        贺州市: { order: 10, depCode: 451000 },
        河池市: { order: 11, depCode: 451200 },
        来宾市: { order: 12, depCode: 451400 },
        崇左市: { order: 13, depCode: 451300 },
      },
      dataShow: [
        { name: "南宁市", depCode: "450100" },
        { name: "柳州市", depCode: "450200" },
        { name: "桂林市", depCode: "450300" },
        { name: "梧州市", depCode: "450400" },
        { name: "北海市", depCode: "450500" },
        { name: "防城港市", depCode: "450600" },
        { name: "钦州市", depCode: "450700" },
        { name: "贵港市", depCode: "450800" },
        { name: "玉林市", depCode: "450900" },
        { name: "百色市", depCode: "451100" },
        { name: "贺州市", depCode: "451000" },
        { name: "河池市", depCode: "451200" },
        { name: "来宾市", depCode: "451400" },
        { name: "崇左市", depCode: "451300" },
      ],
      option: {
        title: {
          text: "广西自治区",
          padding: [50, 0, 0, 90],
          textStyle: {
            color: "#EEAB59",
            fontSize: 30,
          },
        },
        toolbox: {
          top: 45,
          left: 10,
          show: true,
          itemSize: 25,
          itemGap: 12,
          feature: {
            myToolBj: {
              show: true,
              title: "本级",
              icon: "image://" + require("@/assets/images/bj2.png"),
              onclick: function () {
                // myChart.dispose();
                _self.goLocal();
                _self.updateDepCode("450000");
              },
            },
            myToolHome: {
              show: true,
              title: "自治区",
              icon: "image://" + require("@/assets/images/home.png"),
              onclick: function () {
                // myChart.dispose();
                _self.goHome();
                _self.updateDepCode("45%");
              },
            },
          },
        },
        geo3D: {
          data: [],
          map: "guangxi",
          color: "#fff",
          roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。
          itemStyle: {
            areaColor: "red",
            borderWidth: 0.5,
            borderColor: "#000",
          }, //地图上每个省的颜色配置
          label: {
            show: true,
            color: "#000",
            borderColor: "red",
            fontFamily: "sans-serif",
            fontSize: 14,
            fontWeight: "bold",
            backgroundColor: "orange",
            borderRadius: 5,
            // width: 50,
            // height: 15,
            padding: [5, 2, 3, 2],
            clickable: true,
          }, // 标特是否显示，显示配置
          postEffect: {
            enable: false,
          },
          emphasis: {
            //当鼠标放上去的状态
            label: {
              show: true,
              formatter: function (params) {
                area = params.name;
                return params.name;
              },
            },
            itemStyle: {
              color: "rgba(255, 215, 0, 0.7)",
            },
          },

          // tooltip: "axis", //提示框设置

          formatter: (val) => {
            return val;
          },
          /** 标签内容格式器，支持字符串模板和
        回调函数两种形式，字符串模板与回调函数
        返回的字符串均支持用 \n 换行。**/

          // legendHoverLink: true,
          regions: [
            //对不同的区块进行着色
            {
              name: "南宁市", //区块名称
              itemStyle: {
                color: "#007EEE",
                opacity: 1,
                borderColor: "red",
                borderWidth: 1,
              },
            },
            {
              name: "柳州市", //区块名称
              height: 2.8,
              itemStyle: {
                color: "#0087B8",
                opacity: 1,
                borderWidth: 1,
              },
            },
            {
              name: "桂林市", //区块名称
              itemStyle: {
                color: "#0080E5",
                opacity: 1,
              },
            },
            {
              name: "梧州市", //区块名称
              itemStyle: {
                color: "#0071D0",
                opacity: 1,
              },
            },
            {
              name: "北海市", //区块名称
              itemStyle: {
                color: "#0055E7",
                opacity: 1,
              },
            },
            {
              name: "防城港市", //区块名称
              itemStyle: {
                color: "#004CDD",
                opacity: 1,
              },
            },
            {
              name: "钦州市", //区块名称
              itemStyle: {
                color: "#0061D7",
                opacity: 1,
              },
            },
            {
              name: "贵港市", //区块名称
              itemStyle: {
                color: "#0080D4",
                opacity: 1,
              },
            },
            {
              name: "玉林市", //区块名称
              itemStyle: {
                color: "#006FE3",
                opacity: 1,
              },
            },
            {
              name: "百色市", //区块名称
              itemStyle: {
                color: "#004FD4",
                opacity: 1,
              },
            },
            {
              name: "贺州市", //区块名称
              itemStyle: {
                color: "#006DD3",
                opacity: 1,
              },
            },
            {
              name: "河池市", //区块名称
              itemStyle: {
                color: "#0083D1",
                opacity: 1,
              },
            },
            {
              name: "来宾市", //区块名称
              height: 3.4,
              itemStyle: {
                color: "#009FDC",
                opacity: 1,
                borderWidth: 0.1,
              },
            },
            {
              name: "崇左市",
              itemStyle: {
                color: "#004FF2",
                opacity: 1,
              },
            },
          ],
          viewControl: {
            projection: "orthographic",
            autoRotate: false,
            orthographicSize: 70,
            maxOrthographicSize: 120,
            minOrthographicSize: 40,
            alpha: 40,
            animation: true,
            animationDurationUpdate: 2000,
            animationEasingUpdate: "cubicInOut",
            center: [0, 0, -4],
          },
          light: {
            main: {
              color: "#fff",
              intensity: 1.8,
              shadow: true,
              shadowQuality: "high",
              alpha: 50,
              beta: 5,
            },
          },
        },
        series: [
          {
            name: "light",
            type: "scatter3D", //标识点
            symbol: "pin", //散点的形状。默认为圆形。
            coordinateSystem: "geo3D",
            data: [],
            symbolSize: 30,
            animation: true,
            animationDurationUpdate: 100,
            animationEasingUpdate: "cubicOut",
            // label: {
            //   normal: {
            //     show: true, // 是否显示
            //   },
            // },
            itemStyle: {
              color: "#f00",
              borderColor: "#fff",
              borderWidth: 1,
            },

            zlevel: 6,
            emphasis: {
              //当鼠标放上去  地区区域是否显示名称
              label: {
                show: false,
              },
              itemStyle: {
                color: "orange",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initEcharts();
  },
  activated() {
    window.addEventListener("resize", () => myChart.resize(), false);
  },
  beforeDestroy() {
    if (!myChart) {
      return;
    }
    myChart.dispose();
    myChart = null;
  },
  // setup() {
  //   const store = new useStore();

  //   const changeDepCode = (depCode) => {
  //     // asyncAddStoreCount是mutations中的方法，2是传递过去的数据
  //     // 异步改变vuex用dispatch方法，这里用setTimeout模拟异步操作
  //     console.log("改变全局。。。。。。。");
  //     store.dispatch("updateDepCode", depCode);
  //   };
  //   return {
  //     store,
  //     changeDepCode,
  //   };
  // },
  methods: {
    ...mapMutations(["updateDepCode"]),
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(6),
          });
        }
      }
      return res;
    },
    initEcharts() {
      const self = this;
      myChart = this.$echarts.init(document.getElementById("map"));
      this.$echarts.registerMap("guangxi", mapJson);
      this.option.geo3D.data = this.dataShow;
      // this.option.series[0].data = this.convertData(this.dataShow);
      myChart.setOption(this.option);
      window.addEventListener("resize", () => myChart.resize(), false);
      // myChart.on("mousedown", function (params) {
      // // self.option.geo3D.regions[0].name = params.name;
      // // self.resetMap();
      // });
      myChart.getZr().off("click"); //防止触发连续点击事件
      myChart.getZr().on("click", function (e) {
        if (typeof e.target == "undefined") {
          let isinside = $("#map").children()[0].style.cursor;
          if (area !== "" && isinside == "pointer") {
            self.option = self.$options.data().option;
            self.option.title.text = area;
            self.option.geo3D.regions[self.geoMap[area].order].name = area;
            self.option.geo3D.regions[self.geoMap[area].order].itemStyle.color =
              "yellow";
            self.option.geo3D.regions[self.geoMap[area].order].height = 4;
            self.resetMap();
            self.updateDepCode(self.geoMap[area].depCode);
            self.areaName = area;
          }
        }
      });
    },
    resetMap() {
      myChart.setOption(this.option);
    },
    goHome() {
      this.option = this.$options.data().option;
      myChart.setOption(this.option);
      this.areaName = "广西自治区";
    },
    goLocal() {
      this.option.title.text = this.areaName + "（本级）";
      myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped>
.geo3d {
  width: 98%;
  height: 85%;
  /* margin: auto; */
  /* color: #fff;  */
}
</style>